.mine-page{
    padding-bottom: 140rpx;
    padding-bottom: calc(140rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
    .user-top-box{
      overflow: hidden;
      background-image: url('~@/static/images/mine/img_background2.png');
      background-size: 100%;
      position: relative;
      .sign-row{
        position: absolute;
        left: 40rpx;
        right: 40rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* #ifdef MP-WEIXIN */
        padding-right: 200rpx;
        /* #endif */
        .icon{
          width: 40rpx;
          height: 40rpx;
          
        }
        .sign-icon{
          margin-right: 10rpx;
          width: 30rpx;
          height: 30rpx;
        }
        .sign-button{
          box-sizing: border-box;
          font-size: 24rpx;
          padding: 8rpx 14rpx;
          height: 48rpx;
          background-color: rgba(255,255,255,0.2);
          color: #999;
          display: flex;
          align-items: center;
          border-radius: 24rpx;
          justify-content: center;
        }
      }
    }
    .to38Pack{
      position: relative;
      z-index: 2;
      padding: 0 16rpx;
      margin-top: -60rpx;
      margin-bottom: 20rpx;
      image{
        display: block;
      }
      .special{
        display: flex;
        justify-content: space-between;
        margin: 0rpx 10rpx;
      }
      .normal{
        display: flex;
        justify-content: center;
        .img{
          margin-right: 18rpx;
        }
      }
    }
    .vipCard{
      height: 140rpx;
      position: relative;
      margin: 120rpx 45rpx 100rpx 45rpx;
      /* #ifdef MP-WEIXIN */
      margin-top: 140rpx;
      /* #endif */
      box-sizing: border-box;
      display: flex;
      align-items: center;
      .userImg{
        flex: 0 0 140rpx;
        width: 140rpx;
        margin-right: 24rpx;
        height: 140rpx;
        align-items: center;
        justify-content: center;
        display: flex;
        position: relative;
        .user{
          border-radius: 50%;
          width: 120rpx;
          height: 120rpx;
          position: relative;
          z-index: 2;
          border: 4rpx solid white;
        }
        .crown_bg{
          position: absolute;
          top: -16rpx;
          z-index: 0;
          right: -12rpx;
          width: 61rpx;
          height: 57rpx;
        }
        .crown_bg2{
          position: absolute;
          bottom: 8rpx;
          z-index: 0;
          left: 6rpx;
          width: 64px;
          height: 86px;
        }
      }
      .userMsg{
        flex: 1;
        max-width: calc(100% - 250rpx);
        color: white;
        display: flex;
        position: relative;
        .HI{
          font-size: 88rpx;
          margin-right: 20rpx;
        }
        .nickNameTit{
          @include text-ellipsis-line(1);
          font-size: 36rpx;
          overflow: hidden;
          max-width: 380rpx;
          position: relative;
          
        }
        .column{
          margin: 10rpx 0;
          line-height: 55rpx;
          .column-row{
            display: flex;
            align-items: center;
            .official {
              margin-left: 10rpx;
              display: flex;
              align-items: center;
              .officialImg{
                height: 36rpx;
                width: 36rpx;
              }
            }
          }
          
          .inviteCodeView{
            display: block;
            font-size: 24rpx;
            display: flex;
            align-items: center;
            .copyBtn{
              color: $color-tips;
              border: 2rpx solid $color-tips;
              border-radius:16rpx;
              padding: 2px 6px;
              line-height: 28rpx;
              margin-left: 15rpx;
            }
          }
        }
        
      }
      .tagBox {
        display: flex;
        flex-direction: row-reverse;
        position: absolute;
        width: 100%;
        margin-top: 20rpx;
        text-align: right;
        bottom: 0rpx;
        box-sizing: border-box;
        padding-right: 10rpx;
        right: 0;
        z-index: 2;
        .userTag{
          display: flex;
          transition: 500ms;
          width: 140rpx;
          box-sizing: border-box;
          background-color:#EF9DAF;
          line-height: 40rpx;
          border-radius: 20rpx;
          position: relative;
          &.color2{
            background-color:#E7D1B2;
          }
          &.color3{
            background-color:#AAB6D0;
          }
          .userTagTit{
            @include no-wrap;
            height: 40rpx;
            font-weight: normal;
            color: white;
            font-size: 20rpx;
            margin-left: 10rpx;
          }
        }
        .userTagImg {
          position: absolute;
          right: 0;
          top: -4rpx;
          height: 48rpx;
          width: 48rpx;
        }
      }
      .rightArror{
        @include extend-click();
        position: absolute;
        right: 0;
        top: 70rpx;
        width: 24rpx;
        height: 24rpx;
        image{
          width: 24rpx;
          height: 24rpx;
        }
      }
    }
    .adList{
      padding: 0 20rpx;
      .swiper-container{
        height: 200rpx;
      }
    }
      .centerBox{
        position: relative;
        z-index: 2;
        background-color: #fff;
        margin: 20rpx;
        border-radius: 0rpx;
        padding: 20rpx 24rpx;
        .title{
          font-size: 28rpx;
          color: #999;
          padding-bottom: 30rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .question{
              width: 26rpx;
              height: 26rpx;
              padding: 0 10rpx;
              position: relative;
              top: 4rpx;
          }
          .icon_my_more{
            width: 22rpx;
            height: 22rpx;
            margin-left: 10rpx;
          }
          span{
            color:#999;
            font-weight: normal;
          }
        }
        .divW {
          overflow:hidden;
          display: flex;
          .divR {
            text-align: center;
            flex: 1;
            .p1{
              color:#333;
              font-size:44rpx;
              line-height:44rpx;
              font-weight: bold;
              margin: 16rpx 0;
            }
            .p2 {
              color:#666;
              font-size:24rpx;
              line-height:44rpx;
            } 
          }
        }
        .iconList{
          display: flex;
          flex-wrap: wrap;
          font-size: 24rpx;
          align-items: center;
          color: #666;
          margin: -20rpx 0;
          padding-top: 20rpx;
          .imgBox{
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20rpx;
            flex: 0 0 25%;
            position: relative;
            flex-direction: column;
            .tips{
              transform: scale(0.9)
            }
            .inviteTips{
              position: absolute;
              background: rgba(0,0,0,0.8);
              border-radius: 100rpx;
              // left: -15rpx;
              right: -20rpx;
              color: white;
              top: -70rpx;
              width: 305rpx;
              line-height: 54rpx;
              // height: 64rpx;
              // background-image: url('~@/static/images/mine/invite_close_bg.png');
              // background-size: 100% 100%;
              text-align: center;
              .inviteIconClose{
                width: 20rpx;
                margin-left: 10rpx;
                height: 20rpx;
              }
              &::after{
                content: '';
                display: block;
                width: 0;
                height: 0;
                border-left: 12rpx solid transparent;
                border-right: 12rpx solid transparent;
                border-top: 15rpx solid rgba(0,0,0,0.8);
                position: absolute;
                right: 90rpx;
              }
            }
            .iconImg{
              width: 50rpx;
              height: 50rpx;
              margin-bottom: 16rpx;
            }
            .rightNum{
              left: 52%;
              text-align: center;
              top: -16rpx;
              min-width: 36rpx;
              min-height: 30rpx;
              border-radius: 50%;
              color: white;
              background-color: $color-price;
              position: absolute;
            }
          }
        }
      }
  .user-invite-info{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    .mask{
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: -1;
      background-color:rgba(0,0,0,0.6);
    }
    .parent-invite-box{
      width: 550rpx;
      height: 665rpx;
      font-size: 28rpx;
      background-color: #fff;
      box-sizing: border-box;
      padding: 40rpx 32rpx;
      color: #000;
      line-height: 48rpx;
      text-align: center;
      .title{
        margin-bottom: 20rpx;
      }
      .bold{
        font-size: 32rpx;
        font-weight: bold;
      }
      .button{
        height: 80rpx;
        line-height: 80rpx;
        margin-top: 32rpx;
        text-align: center;
        color: white;
        background-color: #000000;
        &.normal{
          border: 2rpx solid #999;
          color: #999;
          background-color: #fff;
        }
      }
    }
  }
  .my-btn{
    .iconList{
      .imgBox{
        margin-bottom: 30rpx;
        .iconImg{
          margin-bottom: 10rpx;
        }
      }
    }
  }
}